
<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>
		
		<u-notice-bar mode="horizontal" :list="listBar"></u-notice-bar>
		
		
		<view class="v2">
			
			<!-- <button @click="open">打开弹窗</button> -->
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog mode="base" message="提示" 
				:duration="2000" :before-close="true" 
				@close="close" @confirm="confirm">
					<view>
						<text class="cuIcon-warn text-blue u-font-lg">{{' '}} 请确认提交</text>
					</view>
				</uni-popup-dialog>
			</uni-popup>
			
			<u-form ref="uForm">
				
				<!-- 说点什么 -->
				<u-form-item label="日常记录"  left-icon="tags" borderBottom 
					label-width="200">
					<!-- <u-icon name="start-fill" color="#ff5500" size="5"></u-icon> -->
				</u-form-item>
				
				<view style="padding-left: 20rpx;">
					<u-input v-model="form.catText" placeholder="写点什么吧......" maxlength="20" ></u-input>
				</view>
				
				<!-- 图片上传 -->
				
				<u-form-item label="上传照片"  left-icon="photo" borderBottom
					label-width="200">
				</u-form-item>
				
				<!-- :size-type="['compressed']" -->
				<view>
					<u-upload 
					ref="uUpload" 
					:header="{'header':'header'}"
					:max-size="5 * 1024 * 1024"
					:max-count="3"
					:action="action" 
					:auto-upload="false" >
					
					</u-upload>
				</view>
				
				<u-form-item label="匿名发布"  left-icon="info-circle" borderBottom
					label-width="200">
					
					<view style="padding-top: 10rpx;padding-left: 80%;">
						<u-switch v-model="checked" size="30"></u-switch>
					</view>
					
				</u-form-item>
				
				
			
			</u-form>
			
			<!-- 打开弹窗 -->
<!-- 			<view style="width: 90%;margin: 40rpx auto;">
				<u-button type="primary" @click="open">上传信息</u-button>
			</view> -->

			<!-- 图片上传 -->
<!-- 			<view class="cu-bar bg-white margin-top-xs u-border-bottom">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">上传图片(1-3张)</text>
					<text class="text-ABC text-blue">information</text>
				</view>
			</view>
			
			<view>
				<u-upload ref="uUpload" 
				:max-count="3"
				:action="action" :auto-upload="false" >
					
				</u-upload>
			</view> -->
			
			<!-- 打开弹窗 -->
			<view style="width: 90%;margin: 40rpx auto;">
				
				<u-button @click="open" v-show="isLoadingShow === 0" :ripple='true'>上传信息</u-button>
				
				<button v-show="isLoadingShow === 1"
				class="cu-btn block bg-blue margin-tb-sm lg">
					<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
				</button>
				
			</view>
				
			
			<!-- 提示框 -->
			<u-toast ref="uToast" />

		</view>

		
	</view>
</template>


<script>
	import { getUserInfo,getToken} from '@/utils/auth';
	
	export default {
		data() {
			return {
				pageName:'分享记录',
				listBar:['分享今日的猫咪日常吧！❤'],
				
				action: this.uploadimg(),   // 图片上传地址
				
				checked: false,    // 是否匿名
				isLoadingShow: 0,  // 加载按钮
				
				form: {
					
					//猫咪记录
					catId: 0,    // 猫咪编号
					
					// 用户信息
					openid: '',         // 用户的openid
					avatar: '',         // 头像
					nickname: '',       // 昵称
					
					
					//分享信息
					catText: '',   // 分享话语
							
					catImg1: '',  
					catImg2: '',  
					catImg3: '',  
					
					
				},
	
			}
		},
		onLoad(option) {
			// 获取猫咪编号
			this.form.catId = option.id;
			console.log(this.form.catId);
			
			// 获取用户openid
			this.goRegister();
			
		},
		methods: {
			
						// switch打开或者关闭时触发，值为true或者false
						// 即使不监听此事件，this.checked此时也会相应的变成true或者false
						change(status) {

						},
			
			
					//提示
					showToast(e) {
					
						//警告提示 【选项检查】
						if(e[0] != 'confirm'){
							this.$refs.uToast.show({
								title: e[0],
								type: 'error',
								url: e[1]
							})
							return
						}
									
						// 获得图片路径
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files = this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})
					
						
						try{
							//如果失败
							if(files[0].response == null || files[0].response == undefined){
								//提示发送错误，请稍后重试
								this.$refs.uToast.show({
									title: '未上传图片或上传图片失败',
									type: 'error',
									url: ''
								})
								return
							}
							
							console.log(files.length)
							
							if(files[0].response.code == 200){
								
								// 循环写入
								for (var i = 0; i < files.length; i++){
									if(i === 0){
										this.form.catImg1 = files[i].response.fileName
									}
									if(i === 1){
										this.form.catImg2 = files[i].response.fileName
									}
									if(i === 2){
										this.form.catImg3 = files[i].response.fileName
									}
								}
		
								console.log(this.form)
								
								
								// 发送请求
								// this.request('uploadDaily', this.form, 'POST').then(res => {
								this.$u.api.uploadDaily(this.form).then(res=>{
									console.log("res:", res)
									
									if(res.code == 200){
										//提示成功
										this.$refs.uToast.show({
											title: res.msg,
											type: 'success',
											url: '/pages/index/tabbar'
										})
									}else{
										this.$refs.uToast.show({
											title: res.msg,
											type: 'error',
											url: '/pages/index/tabbar'
										})
									}
								})
								

								
							}else{			
								//提示发送错误，请稍后重试
								this.$refs.uToast.show({
									title: '上传失败，请稍后重试',
									type: 'error',
									url: ''
								})
								
							}
							this.isLoadingShow = 0
						}
						catch(e){
							//TODO handle the exception
							this.$refs.uToast.show({
								title: '未上传图片或上传图片失败 请稍后再试',
								type: 'error',
								url: ''
							})
							this.isLoadingShow = 0
						}
						
					
					},
			
					//打开弹窗
					open() {
						let e = [];
						e[0] = '';
						e[1] = '';
						// 信息检查
						
						
						// 判断是否为匿名
						if(this.checked){
							// console.log('this.checked:',this.checked)
							this.form.avatar = 'https://img.kancloud.cn/b1/41/b1410ce98ce1df064a3ea911838bc9e4_200x200.png'
							this.form.nickname = '热心猫友' + Math.floor(Math.random()*1000)
							console.log('this.热心猫友:',this.form)
						}
						
						// 分享话语 检查
						if(this.form.catText == '' || this.form.catText == NaN || this.form.catText == null){
							e[0] = '必须写点什么哦！'
							this.showToast(e)
							return
						}		
						
						this.$refs.popup.open();
						
					},
					/**
					 * 点击取消按钮触发
					 * @param {Object} done
					 */
					close() {
						// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
						// ...
						this.$refs.popup.close()
					},
					/**
					 * 点击确认按钮触发
					 * @param {Object} done
					 * @param {Object} value
					 */
					confirm() {
						// TODO 
						// 加载按钮
						this.isLoadingShow = 1
						
						//确认无误后，上传图片
						this.$refs.uUpload.upload();
						
						
						// 关闭弹窗
						this.$refs.popup.close()
						
						
						//开启加载画面
						uni.showLoading({
							title: '上传中',
						});
						
						//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
						this.timer = setTimeout(() => {
						    //TODO 
							//关闭加载画面
							uni.hideLoading();
							
							let e = ['confirm']  // 说明已经确定
							
							//开启弹窗
							this.showToast(e);
						}, 2000);
					},
			
			// 强制用户进行登陆
			goRegister(){
				let openid = getToken();
				
				if(openid){     // 判断是否登陆
				
					this.form.openid = openid
					
					let info = getUserInfo()
					console.log('info:',info)
					
					this.form.avatar = info.avatarUrl
					this.form.nickname = info.nickName
					console.log('form:',this.form)
					

					
					
				}else{
					//返回跳转
					this.$refs.uToast.show({
						title: '需要登陆才可以上传哟 ❤',
						type: 'error',
						url: ''
					})
					
					//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
					this.timer = setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				}
			},
			
			

		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>

<style>
	.v2 {
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15rpx !important;
		background-color: #fff;
		width: 85%;
		padding: 20rpx;
		text-align: left;
		margin: auto;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}
	

	
</style>
